<template>
	<view class="box">
		<view class="form-wraper">
			<view class="title f-side ">
				<view class="title-left flex">
					<image src="../../static/l1.png" mode=""></image>
					<view>{{entryData.VehiclePlateNo}}</view>
					<view class="new-customer" v-if="entryData.IsNewCustomer">新客</view>
				</view>
				<view class="flex" v-if="entryData.VehicleInfoSN">
					<navigator :url="myUrl" class="flex navigator">车辆信息 </navigator>
					<view class="iconfont icon-you"> </view>
				</view>
			</view>
			<view class="flex height-fixed ">
				<view>客户姓名:</view>
				<view class="input zcRelative"><input class="height90" type="text" v-model="entryData.VehicleContact" />
				</view>
			</view>
			<view class="flex height-fixed ">
				<view>电话:</view>
				<view class="input zcRelative"><input class="height90" type="number" maxlength="11" v-model="entryData.VehicleContactMobile" />
				</view>
			</view>
			<view class="flex height-fixed ">
				<view>里程:</view>
				<view class="input flex zcRelative"><input  class="zcflex1 height90" type="number"  v-model="entryData.CurMil" maxlength="10"/>
					<!-- <view v-if="!entryData.CurMil" class="iconfont icon-bitian">必填</view> -->
					<view  class=" itemCenter">km</view>
				</view>
			</view>

			<view class="showMore" :class="showMore?'showMore2':'showMore'">
				<view class="flex height-fixed" @tap="do_chooseCar" v-if="!entryData.IsNewCustomer">
					<view class="flex1 flex" id="car-maker">
						<view class="">厂牌:</view>
						<view class="flex1 f-center">{{entryData.VehicleBrand||''}}</view>
					</view>
					<view class="flex1 flex f-side">
						<view style="flex:0 0 85upx;">车型：</view> 
						<view class="info-discrib1 ">
							{{entryData.VehicleType||''}}
							<!-- <input disabled="true" type="text"  v-model="vCarInfo.VehicleType"/> -->
						</view> 
					</view>
				</view>			
				
				<view class="flex height-fixed" v-if="!entryData.IsNewCustomer">
					<view>保险日期:</view>
					<view class="input zcRelative">
						<picker class="input" mode="date" @change="getPiker($event,'startDate')" :value="entryData.PlanInsurDate">
							<view class="picker-text flex ">{{entryData.PlanInsurDate||''}}
								<view class="iconfont icon-down-trangle2 f-center"></view>
							</view>
						</picker>
					</view>
				</view>
				<view class="flex height-fixed zcRelative">
					<view>其他联系方式:</view>
					<view class="input zcRelative"><input class="height90" type="number" maxlength="11" v-model="entryData.VehicleContactTelephone" />
						
					</view>
				</view>
			</view>
			<view class="flex remark">
				<view>检查说明:</view>
				<view class="input zcRelative"><textarea auto-height v-model="entryData.CheckRemark"></textarea></view>
			</view>
			<view class="flex up-poho remark">
				<view>检查照片:</view>
			</view>
			<view class="flex up-poho remark">
				<view class="flex1 ">
					<zc-up-photo :image="img8" :maxlength="0" :zcId="img8.id" @upImage="upImage" @rmImage="rmImage"></zc-up-photo>
				</view>
			</view>

		</view>
		<view class="btn-wrap flex">
			<zc-button class='view' Name="Uni_Partner_Detail" Action="doReceptEntryCar"  Text="完成" @doMakeData="doSubmit_ReceptEntryCar($event,'完成')" @doBackData="cbSubmit_ReceptEntryCar"></zc-button>
			<zc-button class='view' Name="Uni_Partner_Detail" Action="doReceptEntryCar" :class="entryData.isCanClaim?'':'isCanClaim'" :Btn_disabled="!entryData.isCanClaim" :Text="entryData.isCanClaim?'认领':'AS:'+ (entryData.SalesManName||'')" @doMakeData="doSubmit_ReceptEntryCar($event,'认领')" @doBackData="cbSubmit_ReceptEntryCar"></zc-button>
		</view>
		<zc-custom-picker :isShowBox="carType.isShowBox" :boxId="carType.boxId" :cpitem1="carType.cpitem1" :cpitem2="carType.cpitem2"
		 :cpitem3="carType.cpitem3" :cpitem4="carType.cpitem4" @zcItemClick="zcItemClick" @zcClickValue="zcClickValue" @zcSearchInput="zcSearchInput"></zc-custom-picker>
	</view>
</template>

<script>
	let _this;
	import zcButton from "../../components/button/zc-button.vue"
	import zcUpPhoto from "../../components/zc-upPhoto/zc-upPhoto.vue";
	import zcCustomPicker from "../../components/zcCustom_picker/zcCustom-picker.vue"
	export default {
		components: {
			zcUpPhoto,
			zcCustomPicker,
			zcButton
		},
		data() {
			return {
				bth_disable:true,
				showMore: true, //默认展示更多
				img8: {
					id: 8,
					bgImag: '../../static/car7.png',
					images: [],
					imgInfos: []
				},
				carSN: '',
				carType: {
					isShowBox: false,
					boxId: 0,
					cpitem1: [],
					cpitem2: [],
					cpitem3: [],
					cpitem4: []
				},
				entryData: {}, //车辆进场信息
				ModelType: '',
				items1_more:[],
				carNO:''  //上页面传过来车牌号
			}
		},
		created() {
			_this = this
		},
		onLoad(e) {
			console.log('页面参数 = ', e);
			_this.carNO = e.carNO;
			_this.getEntryCarJDByVehiclePlateNo();
		},
		computed: {
			myUrl() {
				return '../../pages/home_car_archives/home_car_archives?SN=' + this.entryData.VehicleInfoSN
			}
		},

		methods: {
			/* 2019-12-2 新加查询车辆信息按车牌查询 */
		getEntryCarJDByVehiclePlateNo() { //车辆进场详情数据
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'Uni_Partner_Detail',
						Action: 'getEntryCarJDByVehiclePlateNo',
						Data: {
							vehiclePlateNo: _this.carNO
						}
					},
					Callback: _this.cb_getEntryCarJDByVehiclePlateNo,
					Scope: _this
				})
			},
			cb_getEntryCarJDByVehiclePlateNo(resJson, scope) {
					console.log("车辆进场详情车牌查询", resJson)
					if (resJson.success) {
						_this.entryData = resJson.data;
						if(_this.entryData.CurMil ==0){
							_this.entryData.CurMil = ''
						}
						//_this.entryData.PlanInsurDate = _this.$ZcPublic.formatDate(_this.entryData.PlanInsurDate, 'yyyy-MM-dd')
						// _this.entryData.VehicleRegistryDate = "2019-11-14";
					}
			},
			doSubmit_ReceptEntryCar(para,model) {
				para.data = {
					obj: _this.entryData,
					ModelType: model
				}
				if(para.data.obj.CurMil == '') {
					//判断不能为空
					para.success = false;
					para.msg = '请录入行驶里程!';
				}else if(parseInt(para.data.obj.CurMil)>1000000){
					para.success = false;
					para.msg = '里程过长，请重新录入里程!';
				}
			},
			cbSubmit_ReceptEntryCar(resJson, scope) {
				uni.hideLoading();
					console.log("车辆认领提交", resJson)
					if (resJson.success) {
						let showText = _this.ModelType == "认领" ? '认领成功' : '接待成功'
						uni.showToast({
							title: showText,
						});
						setTimeout(() => {
							uni.switchTab({
								url: '../home/home'
							});
						}, 1200)

					}
			},
			getPiker(e) {
				_this.entryData.PlanInsurDate = e.detail.value
			},
			upImage(res) {
				console.log("上传");
				_this.img8.images = res.images;
				_this.img8.imgInfos = res.imgInfos;
				_this.entryData.Files = res.imgInfos

			},
			rmImage(res) {
				console.log("上传删除");
				_this.img8.images.splice(res.index, 1);
				_this.img8.imgInfos.splice(res.index, 1);
			},
			do_chooseCar() {
				_this.zcGetCarModel('', '', '', '');
			},
			zcItemClick(res) {
				console.log('点击 = ', res);
				uni.showLoading({
					title: '',
					mask: true
				});
				if (res.isShowBox === false) {
					_this.carType.isShowBox = false;
					uni.hideLoading()
				} else {
					let name1 = '';
					let name2 = '';
					let name3 = '';
					let name4 = '';
					_this.carType.boxId = res.boxId;
					_this.carType.value = [];
					_this.carType.value = res.value;
					if (res.boxId === 1) {
						name1 = _this.carType.cpitem1[res.value[0]].name;
					}else if (res.boxId === 2) {
						name1 = _this.carType.cpitem1[res.value[0]].name;
						name2 = _this.carType.cpitem2[res.value[1]].name;
					}else if (res.boxId === 3) {
						name1 = _this.carType.cpitem1[res.value[0]].name;
						name2 = _this.carType.cpitem2[res.value[1]].name;
						name3 = _this.carType.cpitem3[res.value[2]].name;
					}
					
					_this.zcGetCarModel(name1,name2,name3,name4);
				}

			},
			zcClickValue(res) {
				console.log('车型值 = ', res);
				_this.carType.isShowBox = false;
				_this.carType.boxId = 0;
				_this.entryData.VehicleBrand = _this.carType.cpitem1[res[0]].name
				_this.entryData.VehicleType = _this.carType.cpitem2[res[1]].name 			
			},
			zcSearchInput(e) {
				console.log('车型数据过滤(e)',e);
				let list = [];
				if (e.index === 0) {
					_this.carType.cpitem1 = _this.carType.items1;
					for (let i = 0; i < _this.carType.cpitem1.length; i++) {
						if (_this.carType.cpitem1[i].name.indexOf(e.res) != -1) {
							list.push(_this.carType.cpitem1[i]);
						}
					}
					if (e.res) {
						_this.carType.cpitem1 = list;
					}
				}else if (e.index === 1) {
					_this.carType.cpitem2 = _this.carType.items2;
					for (let i = 0; i < _this.carType.cpitem2.length; i++) {
						if (_this.carType.cpitem2[i].name.indexOf(e.res) != -1) {
							list.push(_this.carType.cpitem2[i]);
						}
					}
					if (e.res) {
						_this.carType.cpitem2 = list;
					}
				}else if (e.index === 2) {
					_this.carType.cpitem3 = _this.carType.items3;
					for (let i = 0; i < _this.carType.cpitem3.length; i++) {
						if (_this.carType.cpitem3[i].name.indexOf(e.res) != -1) {
							list.push(_this.carType.cpitem3[i]);
						}
					}
					if (e.res) {
						_this.carType.cpitem3 = list;
					}
				}else if (e.index === 3) {
					_this.carType.cpitem4 = _this.carType.items4;
					for (let i = 0; i < _this.carType.cpitem4.length; i++) {
						if (_this.carType.cpitem4[i].name.indexOf(e.res) != -1) {
							list.push(_this.carType.cpitem4[i]);
						}
					}
					if (e.res) {
						_this.carType.cpitem4 = list;
					}else {
						_this.zcGetCarModel(_this.carType.cpitem4[_this.carType.value[0]],_this.carType.cpitem4[_this.carType.value[1]],_this.carType.cpitem4[_this.carType.value[2]],'');
					}
				}
			},
			// 	获取车型
			zcGetCarModel(BName, SName, Name, YName) {
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'Uni_Partner_Detail',
						Action: 'Ext_GetCarModel',
						Data: {
							BName: BName,
							SName: SName,
							Name: Name,
							YName: YName,
						}
					},
					Callback: function(resjson, scope) {
						if (resjson.state === 'back') {
							// console.log('获取车型 ：',resjson.data);
							if (!resjson.success) {
								uni.showModal({
									title:'温馨提示',
									showCancel:false,
									content:''+resjson.msg
								})
								return;
							}
							_this.carType.isShowBox = true;
							if (!BName && !SName && !Name && !YName) {
								_this.carType.cpitem1 = resjson.data;
								_this.carType.items1 = resjson.data;
								_this.carType.cpitem2 = [];
								_this.carType.cpitem3 = [];
								_this.carType.cpitem4 = [];
							}else if (BName && !SName && !Name && !YName) {
								_this.carType.cpitem2 = [];
								_this.carType.items2 = [];
								_this.carType.cpitem2 = resjson.data;
								_this.carType.items2 = resjson.data;
								_this.carType.cpitem3 = [];
								_this.carType.cpitem4 = [];
							}else if (SName && BName && !Name && !YName) {
								_this.carType.cpitem3 = [];
								_this.carType.items3 = [];
								_this.carType.cpitem3 = resjson.data;
								_this.carType.items3 = resjson.data;
								_this.carType.cpitem4 = [];
							}else if (Name && BName && SName && !YName) {
								_this.carType.cpitem4 = [];
								_this.carType.items4 = [];
								_this.carType.cpitem4 = resjson.data;
								_this.carType.items4 = resjson.data;
							}
							uni.hideLoading()
						} else {
              uni.hideLoading()
						}
					},
					Scope: _this
				});
			}
		}
	}
</script>

<style>
	.form-wraper {
		background: #fff;
		padding: 10upx 20upx 10upx 20upx;
		/* margin-bottom: 100upx; */
	}

	.box {
		padding-bottom: 100upx;
	}

	.title-left image {
		width: 45upx;
		height: 45upx;
		margin-right: 10upx;
		position: relative;
		top: 8upx;
		/* border: 1upx solid; */
	}

	.title-left>view:nth-of-type(1) {
		font-weight: 530;
		font-size: 32upx;
	}

	.new-customer {
		height: 36upx;
		line-height: 36upx;
		padding: 0 18upx;
		background: #50ADFD;
		color: #fff;
		border-radius: 10upx;
		margin-left: 20upx;
		position: relative;
		top: 11upx
	}

	.navigator {
		color: #8F8F8F;
	}

	.height-fixed,
	.title {
		height: 90upx;
		line-height: 90upx;
		border-bottom: 1upx solid #e5e5e5;
		background: #fff;
		align-items: center;
	}
.height90{
			height: 90upx !important;
	line-height: 90upx !important;
}
	.height-fixed>view {
		line-height: 80upx;
	}

	.remark {
		border-bottom: 1upx solid #e5e5e5;
		padding-bottom: 15upx;
	}

	.height-fixed>view:nth-of-type(1),
	.remark>view:nth-of-type(1) {
		width: 190upx !important;
		color: #808080;
	}

	.remark>view:nth-of-type(1) {
		flex: 0 0 190upx;
	}

	.show-more {
		color: #808080;
	}

	.remark>view:nth-of-type(1) {
		padding-top: 15upx;
	}

	.remark>view:nth-of-type(2) {
		/* min-height: 100upx; */
		line-height: 40upx;
		padding-top: 20upx;
	}

	.up-poho {
		padding-bottom: 15upx;
		/* width: 70% !important; */
		border-bottom: none;
	}

	.up-poho>view:nth-of-type(2) {
		/* width: 46% !important; */
	}

	.btn-wrap {
		position: fixed;
		height: 95upx;
		bottom: 0;
		width: 100%;

	}

	.btn-wrap .view {
		flex: 1;
		/* margin-left: 20upx; */
		background-color: #50ADFD;
		color: #fff;
		border-radius: 0;
	}
		.btn-wrap .view button{
			background-color: transparent;
		}
.btn-wrap .view:nth-of-type(2) .zc-button-default{
	color: #fff;
}
	.btn-wrap .view:nth-of-type(1) {
		background-color: #fff;
		color: #50ADFD;
		border-top: 1upx solid #ccc;
	}

	.card_img>view {
		border: none !important;
	}

	.icon-down-trangle,
	.icon-up2 {
		margin-left: 5upx;
		flex: 0 0 0;
	}

	.close {
		position: absolute;
		right: 20upx;
		color: #A4A4A4;
	}

	.icon-up2 {
		margin-left: 10upx;
	}

	.icon-you {
		color: #8F8F8F;
		font-size: 24upx;
		margin-left: 5upx;
		padding-top: 4upx;
	}

	.input {
		flex: 1;
	}

	.input>input {
		width: 100%;
		height: 100%;
		padding-right: 20upx;
	}

	.input>textarea {
		width: 100%;
		min-height: 54upx;
	}

	.picker-text {
		height: 80upx;
		width: 100%;
		text-align: left;
		line-height: 80upx;
	}

	.isCanClaim,.isCanClaim button {
		background-color: #50ADFD !important;
	}

	.showMore {
		max-height: 0upx;
		overflow: hidden;
		transition: max-height 1s ease;
		
	}

	.showMore2 {
		max-height: 600upx;
	}

	.icon-bitian {
		color: #ccc;
		position: absolute;
		right: 10upx;
		z-index: 10;
		top: 8upx
	}

	.icon-bitian:before {
		color: #FEB66F;
		font-size: 36upx;
	}
		#car-maker{
		flex:0 0 260upx !important
	}
</style>
